<template>
  <Layout>
    <el-form ref="ruleFormRef" :rules="rules" :model="form" label-position="top">
      <el-form-item label="家长电话" prop="p_phone">
        <el-input v-model="form.p_phone"   placeholder="请输入家长电话"></el-input>
      </el-form-item>
      <el-form-item label="请假时间" prop="startTime">
        <el-date-picker :disabled-date="disabledDate" :clearable="false" :editable="false" v-model="form.startTime"
          value-format="YYYY-MM-DD+HH%3[A]mm" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="放行类型" prop="detailedType">
        <el-select v-model="form.detailedType">
          <el-option v-for="type in LeaveTypeList" :key="type.value" :label="type.label"
            :value="type.value" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="放行班级" prop="className">
        <el-select v-model="className">
          <el-option :label="studentStore.className" :value="studentStore.className"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批人" prop="headTeatherName">
        <el-select v-model="headTeatherName">
          <el-option :label="studentStore.headTeatherName" :value="studentStore.headTeatherName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="放行理由" prop="reason">
        <el-input maxlength="20"  placeholder="请输入放行理由" show-word-limit type="textarea" v-model="form.reason" />
      </el-form-item>
      <el-form-item label="是否离深" prop="leavaSz">
        <el-select v-model="form.leaveSz">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="9"></el-option>
        </el-select>
      </el-form-item>
      <KeepAlive><el-form-item prop="Destination" v-if="form.leaveSz == 1" label="去往目的地">
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.province">
            <el-option v-for="(item, index) in pcaTextArr" :label="item.label" :value="index"></el-option>
          </el-select>
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.city">
            <el-option v-for="(item, index) in pcaTextArr[form.province]
      .children" :label="item.label" :value="index"></el-option>
          </el-select>
          <el-select style="width: 30%; padding-right: 10rem" v-model="form.district">
            <el-option v-for="(item, index) in pcaTextArr[form.province]
      .children[form.city].children" :label="item.label" :value="index"></el-option>
          </el-select> </el-form-item></KeepAlive>
      <el-form-item>
        <div style="
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    ">
          <el-button style="width: 90%" size="large" type="primary" @click="onSubmit(ruleFormRef)">立即申请</el-button>
        </div>
      </el-form-item>
    </el-form>
  </Layout>
</template>

<script setup>
import Layout from './component/Layout.vue';
import { ref } from 'vue';
import { pcaTextArr } from 'element-china-area-data';
import { useStudentStore } from '@/stores/modules/studentStore';
import { reqSave } from '@/api/student';
import { getClassInfo } from './component/commit.js';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const ruleFormRef = ref();
const studentStore = useStudentStore();

const headTeatherName = ref(studentStore.headTeatherName);
const className = ref(studentStore.className);

const LeaveTypeList = ref([
  {
    label: '事假',
    value: 1
  },
  {
    label: '病假',
    value: 2
  },
  {
    label: '实习生',
    value: 5
  }
]);

const form = ref({
  detailedType: 1,
  leaveSz: 9,
  // 省
  province: 1,
  // 市
  city: 0,
  // 区
  district: 0,
  // 请假条类型(放行)
  leaveType: 2,
  p_phone: '',
  parentPhone: '',
  reason: '',
  startTime: '',
  start_time: '',
  state: 0,
  teacher_number: ''
});
const getclassinfo = async () => {
  const data = await getClassInfo();
  console.log(data);
  form.value.className = data.className;
  form.value.headTeacherName = data.headTeacherName;
  form.value.parentPhone = data.parentPhone;
};
getclassinfo();
const rules = ref({
  p_phone: [
    { required: true, message: '请输入家长电话', trigger: 'blur' },
    {
      min: 11,
      max: 11,
      message: '手机号的长度应为11个字符',
      trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/, //手机号正则表达式
      message: '请输入正确的手机号',
      trigger: 'blur'
    }
  ],
  detailedType: [
    { required: true, message: '请选择放行类型', trigger: 'change' }
  ],
  startTime: [
    { required: true, message: '请选择请假日期', trigger: 'change' }
  ],
  leaveSz: [{ required: true, message: '请选择是否离深', trigger: 'change' }],
  Destination: [
    { required: true, message: '请选择目的地', trigger: 'change' }
  ],
  className: [{ required: true, message: '请选择班级', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入请假理由', trigger: 'blur' }],
  headTeacherName: [
    { required: true, message: '请选择班主任', trigger: 'blur' }
  ]
});
const onSubmit = async formEl => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      console.log('submit!');
      const subForm = {
        classid: '',
        leaveSz: form.value.leaveSz,
        leavePlace: null,
        leaveType: form.value.leaveType,
        p_phone: form.value.p_phone,
        parentPhone: form.value.parentPhone,
        reason: form.value.reason,
        startTime: Date.parse(Date(form.value.startTime)),
        start_time: form.value.startTime,
        state: 0,
        teacher_number: ''
      };
      if (form.value.detailedType === 5) {
        subForm.detailedType = form.value.detailedType;
        subForm.form = form.value.detailedType;
      } else {
        subForm.detailedType = 4;
        subForm.form = 4;
      }
      if (form.value.leaveSz === 1) {
        subForm.leavePlace = `${pcaTextArr[form.value.province].value}${pcaTextArr[form.value.province].children[form.value.city]
          .value
          }${pcaTextArr[form.value.province].children[form.value.city]
            .children[form.value.district].value
          }`;
      }
      try {
        const result = await reqSave(subForm);
        if (result.status === '200') {
          console.log(result);
          ElMessage({
            type: 'success',
            message: '申请成功'
          });
          router.push('/student/index');
        }
      } catch (error) { }
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
const disabledDate = data => {
  if (data.getTime() < Date.now()) {
    return true;
  } else {
    return false;
  }
};
</script>

<style scoped></style>
